<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta charset="utf-8">
  <title>Test de grabacion - comienzo</title>
  <link type="text/css" 
        href="/static/css/style.css?v=3" rel="stylesheet"/>
  <link type="text/css" 
        href="/static/css/bootstrap/bootstrap.css" rel="stylesheet">
  <link type="text/css" 
        href="/static/css/ui-lightness/jquery-ui-1.9.1.custom.css" rel="stylesheet"/>

  <script type="text/javascript" 
        src="/static/js/jquery-1.8.2.js"></script>
  <script type="text/javascript" 
        src="/static/js/jquery-ui-1.9.1.js"></script>
  <script type="text/javascript" 
        src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
  <script type="text/javascript" 
        src="/static/js/recorder.js?v=4"/></script>
  <script  type="text/javascript"
        src="/static/js/jquery.runner.js"></script>
  <script type="text/javascript" 
        src="/static/js/record_view.js">
  </script>
  <script type="text/javascript" 
        src="/static/js/record_filters.js?v=1">
  </script>
  <script type="text/javascript" 
        src="/static/js/record_functions.js?v=8">
  </script>
</head>

<body onload="setup()">

  <div id="speaker_id" style="display: none;" speakerId="{{speaker_id}}">SpeakerId</div>

  <div id="mic-warning">
      Por favor, seleccioná "Permitir / Allow" como muestra en los siguientes ejemplos.
      <div id="wrap">
        <div id="flash-permission"></div>
        <div id="chrome-permission"></div>
      </div>
  </div>

  <div class="container">

    <!--<h2 class="input" id="instruction-rec">Presioná GRABAR y decí en forma natural la frase de abajo
    </h2>-->
    
    <div id="dialog-modal" style="display: none"></div>  
    <div id="dialog-instructions" style="display: none">
      
      <h3 class="input text-center">
        Vamos a mostrarte varias frases para grabar. Por favor, decilas en forma <i><u>tan natural como sea posible</i></u>
      </h3>
      <p class="text-center">
        <img border="0" src="http://us.cdn3.123rf.com/168nwm/chudtsankov/chudtsankov1108/chudtsankov110800063/10391669-outlined-cartoon-speech-bubble-speak.jpg">
      </p>
      <p class="text-center">
        <button id="dialog-instructions-button" class="btn btn-large btn-primary">¡Comenzar!</button>
      </p>

    </div> 
    <div id="wami"></div> 
    
    <!--<div id="instruction">
    Instrucciones:
    </div>-->
    <ul id="instruction-btn">
    <li>Para empezar a grabar presioná 
      <button class="record-skin-dummy mini-button" type="button" disabled="disabled"></button>
    </li>
    <li>Cuando termines de hablar, presioná 
      <button class="stop-skin-dummy mini-button" type="button" disabled="disabled"></button>
    </li>
    <li>Podés escuchar lo que grabaste presionando 
      <button class="play-skin-dummy mini-button" type="button" disabled="disabled"></button>
    </li>
    <li>Si estás conforme con la grabación, presioná 
      <button class="next-skin-dummy mini-button" type="button" disabled="disabled"></button>
    </li>
    <li>Si no estás conforme, podés grabarlo nuevamente.</li>
    </ul>
  
    <div id="tabs">

      <ul style="display: none;">
        {% for word in word_list %}
          <li><a href="#tabs-word-{{ word.id }}">Test word {{ word.description }}</a></li>
        {% endfor %}
      </ul>

      {% for word in word_list %}
        <div class="wordexp" word-id="{{ word.id }}" id="tabs-word-{{ word.id }}">

          <div id="word.presentation" class="word.presentation text-center">
            <h3 id="word-phrase">"{{ word.text }}".</h3>  
          </div>

          <div class="wrapper">

            <div class="volume">
              <div class="saturation">Nivel del micrófono: </div>
              <div class="meter"></div>
            </div>

            <h4>
              <div class="status">Estado:  
              </div>
              <div class="spinner">
              </div>    
            </h4>
            
            <h4>
              <div class="runner" word-id="{{ word.id }}"></div>
            </h4>
            
            <div style="text-align: center;">
              <input  class="record-skin record button" 
                      type="button" value="" 
                      onclick="record({{ word.id }})">
              </input>
              <input  style="display: none;" 
                      class="stop-skin stop button" 
                      type="button" value="" 
                      onclick="stop({{ word.id }})">
              </input>
              <input  disabled 
                      class="play-skin play button" 
                      type="button" value="" 
                      onclick="play({{ word.id }})">
              </input>
            </div>

          </div>          
        </div>
      {% endfor %}

    </div>

    <button style="display: none;" class="input" id="previous-product"><</button>
    <button disabled class="next-skin button" id="next-product" 
            onclick="next_product()"></button>​

    <div id="test-contador" class="input">
    </div>

    <form action="/audios/end/" method="get">
      <button style="display: none;" class="btn btn-primary .btn-large input text-center" id="exit">Salir</button>​
    </form>

    <div style="display: none;" id="dialog-confirm" title="¿Querés seguir?">
      <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 12px 30px 0;"></span>Ya completaste 5 grabaciones. ¿Querés hacer otras 5 más? ¡Todas las que puedas hacer nos sirven!</p>
    </div>

  </div>

</body>

<script type="text/javascript">

  //dejamos esto: puede servir para ver que se va haciendo
  var check_test = { 
    {% for word in word_list %}
      'test-w{{word.id}}': 0,
    {% endfor %}
  };
  var checkSaturation = null;
  
  var maxVolumenLevel = 80;
  var minVolumenLevel = 1;
  
  var minNumberExperiments = 5;

</script>
</html>
